<template>
  <div class="table-search-select">
    <div
      v-for="(opt, idx) in options"
      :key="idx"
      class="search-opt-label"
      @click="change(opt)">
      <span>{{opt.label}}: &nbsp;&nbsp;{{inputText}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TableSearchSelector',
    model: {
      event: 'change'
    },
    props: {
      value: { // 当前选中的搜索条件
        type: Object,
        default: () => {
          return {};
        }
      },
      options: { // 搜索条件
        type: Array,
        default: () => {
          return [];
        }
      },
      inputText: {
        type: String,
        default: ''
      }
    },
    methods: {
      change(opt) {
        const value = this.value; // 当前选中的搜索条件对象
        const exist = value[opt.key]; // 拿到搜索条件对象中的key属性的值
        if (!exist) { // 值不存在
          value[opt.key] = [this.inputText]; // 当前key属性的值为输入的值,eg(用户管理)=>actualName:['张']
        } else {
          if (!exist.includes(this.inputText)) {
            exist.push(this.inputText); // 当前key属性的值存在且不包含当前输入的值时才添加
          }
        }
        this.$emit('change', value);
      },
      reset() {
        this.$emit('change', {});
      }
    }
  };
</script>

<style scoped lang="less">
  .table-search-select {
    .search-opt-label {
      line-height: 40px;
      font-size: @sizeSecond;
      color: @colorGray40;
      padding-left: 15px;
      cursor: pointer;
      position: relative;
    }

    .search-opt-label:hover {
      background: @colorGray98;
      color: @colorPrimary;
    }

    .search-opt-icon {
      color: @colorPrimary;
      font-weight: bold;
      position: absolute;
      top: 12px;
      right: 10px;
    }
  }
</style>
